<template>
  <view class="app" v-if="showView">
    <!-- 轮播图 -->
    <u-swiper
      :list="carousels"
      :autoplay="true"
      :height="750"
      :interval="5000"
      v-if="carousels.length > 0"
    ></u-swiper>

    <view class="flex" v-else>
      <image class="goods-logo" mode="aspectFill" :src="goods.goods_logo"></image>
    </view>

    <!-- 商品标题 -->
    <view class="bg-white px-25rpx py-35rpx">
      <view class="flex items-baseline" v-if="goods.goods_spec_type == 1">
        <mt-format-money
          class="sales-price"
          :size="27"
          :money="goods.goods_specs[0].goods_price"
        ></mt-format-money>

        <text class="market-price" v-if="parseFloat(goods.goods_specs[0].market_price) > 0">
          ￥{{ parseFloat(goods.goods_specs[0].market_price).toFixed(2) }}
        </text>

        /* #ifdef MP-WEIXIN */
        <view class="share-box">
          <button class="share-btn" open-type="share" hover-class="none">
            <image class="share-icon" src="@/static/icon/svg/video/share.svg" />
            <text class="share-text">分享</text>
          </button>
        </view>
        /* #endif */
      </view>
      <view class="flex flex-col">
        <text class="goods-name pt-12rpx">{{ goods.goods_name }}</text>
        <text class="goods-desc pt-12rpx" v-if="goods.goods_desc">{{ goods.goods_desc }}</text>
      </view>
      <view class="flex items-end pt-15rpx">
        <text class="sales-title">销量：</text>
        <text v-if="goods.goods_spec_type == 1" class="goods-sales">
          {{ goods.goods_specs[0].goods_sales }}
        </text>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="bg-white mt-10rpx mb-110rpx">
      <mt-uparse :html="goods.goods_detail" :preview="false" :selectable="true"></mt-uparse>
    </view>

    <!-- 商品规格 -->
    <u-popup v-model="showWin" border-radius="20" mode="bottom" height="60%">
      <view class="goods-spec">
        <view class="flex">
          <image class="goods-thum" mode="aspectFill" :src="goods.goods_logo"></image>
          <view class="ml-20rpx flex flex-col justify-center" v-if="goods.goods_spec_type == 1">
            <text class="goods-price">{{ goods.goods_specs[0].goods_price }}</text>
            <text class="goods-stock">库存：{{ goods.goods_specs[0].goods_stock }}</text>
          </view>
        </view>
        <view class="num-box">
          <text class="num-title">数量</text>
          <view class="set-num">
            <view class="minus-btn num-btn" @click="minusNum()">
              <u-icon name="minus" size="23" :color="numInfo.minus ? 'black' : 'lightgray'"></u-icon>
            </view>
            <input
              class="goods-num"
              type="number"
              v-model.number="numInfo.num"
              maxlength="3"
              @blur="checkNum()"
            />
            <view class="plus-btn num-btn" @click="plusNum()">
              <u-icon name="plus" size="23" :color="numInfo.plus ? 'black' : 'lightgray'"></u-icon>
            </view>
          </view>
        </view>
        <view class="finish-box">
          <text class="finish-btn cart-btn" v-show="action == 'cart'" @click="addCart()"> 加入购物车 </text>
          <text class="finish-btn buy-btn" v-show="action == 'buy'" @click="createOrder()"> 完成 </text>
        </view>
      </view>
    </u-popup>

    <!-- 导航栏 -->
    <view class="goods-nav">
      <view class="nav-left">
        <view class="icon-box" @click="goto('/pages/index/index')">
          <image class="icon-image" mode="aspectFit" src="@/static/icon/svg/tabbar/home.svg"></image>
          <text class="icon-title">首页</text>
        </view>
        <view class="icon-box relative" @click="goto('/pages/cart/index')">
          <view class="cart-num" v-if="cartStore.cartNum > 0">{{ cartStore.cartNum }}</view>
          <image class="icon-image" mode="aspectFit" src="@/static/icon/svg/tabbar/cart.svg"></image>
          <text class="icon-title">购物车</text>
        </view>
      </view>

      <view class="flex">
        <text class="add-cart nav-btn" @click="openWin('cart')">加入购物车</text>
        <text class="go-buy nav-btn" @click="openWin('buy')">立即购买</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import mtFormatMoney from '@/components/mt-format/mt-format-money.vue';
  import mtUparse from '@/components/mt-uparse/mt-uparse.vue';
  import { ref, reactive } from 'vue';
  import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
  import { getGoodsDetail as getDataApi } from '@/api/goods/index';
  import { getGoodsCartNum, addGoodsCart } from '@/api/goods/cart';
  import { useFansStore } from '@/store/fans';
  import { useCartStore } from '@/store/cart';
  import { report } from '@/utils/exception';
  import { msg } from '@/utils/msg';
  import type { GoodsList } from '@/types/goods';

  const showView = ref<boolean>(false);
  const showWin = ref<boolean>(false);
  const action = ref<string>('');
  const cartStore = useCartStore();
  const fansStore = useFansStore();

  let numInfo = reactive({
    num: 1,
    plus: true,
    minus: true,
  });

  const carousels = ref<string[]>([]);
  let goods = reactive<GoodsList>({
    id: 0,
    goods_spec_type: 1,
    goods_name: '',
    goods_desc: '',
    goods_logo: '',
    goods_detail: '',
    goods_specs: [],
  });

  onLoad((option: any) => {
    getDataApi({ id: option.id })
      .then((res) => {
        goods = res.data as GoodsList;
        if (goods.goods_imgs) {
          carousels.value = goods.goods_imgs.split(',');
        }
        initNum();
        showView.value = true;
      })
      .catch((err) => {
        report(err);
      });

    if (fansStore.fansinfo.token && cartStore.cartInit == 0) {
      getGoodsCartNum()
        .then((res) => {
          cartStore.cartNum = res.data.cart_num;
          cartStore.cartInit = 1;
        })
        .catch((err) => {
          report(err);
        });
    }
  });

  const initNum = () => {
    if (goods.goods_specs[0].goods_stock <= 0) {
      numInfo.minus = false;
      numInfo.plus = false;
      return;
    }
    checkNum();
  };

  const checkNum = () => {
    if (numInfo.num < goods.goods_specs[0].goods_stock) {
      numInfo.plus = true;
      if (numInfo.num >= 999) {
        numInfo.num = 999;
        numInfo.plus = false;
      }
    } else {
      numInfo.num = goods.goods_specs[0].goods_stock;
      numInfo.plus = false;
    }

    if (numInfo.num > 1) {
      numInfo.minus = true;
    } else {
      numInfo.num = 1;
      numInfo.minus = false;
    }
  };

  const minusNum = () => {
    if (!numInfo.minus) return;
    numInfo.num--;
    checkNum();
  };

  const plusNum = () => {
    if (!numInfo.plus) return;
    numInfo.num++;
    checkNum();
  };

  const goto = (url: string) => {
    uni.switchTab({ url: url });
  };

  const addCart = () => {
    if (numInfo.num > goods.goods_specs[0].goods_stock) {
      msg.error('商品库存不足');
      return;
    }

    addGoodsCart(goods.id, goods.goods_specs[0].id, numInfo.num)
      .then((res) => {
        cartStore.cartNum = res.data.cart_num;
        showWin.value = false;
        cartStore.cartReload = 1;
        msg.success('已加入到购物车');
      })
      .catch((err) => {
        report(err);
      });
  };

  const createOrder = () => {
    if (numInfo.num > goods.goods_specs[0].goods_stock) {
      msg.error('商品库存不足');
      return;
    }
    const orderGoods = `${goods.id}@${goods.goods_specs[0].id}@${numInfo.num}`;
    uni.navigateTo({ url: `/pages/order/pay?order_goods=${orderGoods}` });
  };

  const openWin = (type: string) => {
    action.value = type;
    showWin.value = true;
  };

  /* #ifdef MP-WEIXIN */
  // 微信分享
  onShareAppMessage((res) => {
    return {
      title: goods.goods_name,
      path: '/pages/goods/detail?id=' + goods.id,
      imageUrl: goods.goods_logo,
    };
  });

  uni.showShareMenu({
    menus: ['shareAppMessage', 'shareTimeline'],
    withShareTicket: true,
  });
  /* #endif */
</script>

<style lang="scss" scoped>
  .sales-price {
    color: $themeColor;
    font-size: 45rpx;
    font-weight: 600;
    margin-right: 15rpx;
    &::before {
      content: '￥';
      font-size: 28rpx;
      font-weight: 600;
    }
  }

  .market-price {
    color: gray;
    text-decoration: line-through;
    font-size: 27rpx;
    // padding-top: 17rpx;
    padding-left: 5rpx;
  }

  .share-box {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    height: 42rpx;

    .share-btn {
      display: flex;
      padding: 0 10rpx;
      font-size: 22rpx;
      letter-spacing: 3rpx;
      align-items: center;
      justify-content: center;
      margin-right: initial;
      border-radius: 50rpx;
      color: white;
      background: #ff9d00;
      &::after {
        border: none;
      }
    }
    .share-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 5rpx;
    }

    .share-text {
      top: 3rpx;
    }
  }

  .goods-name {
    padding-left: 5rpx;
    font-size: 32rpx;
    font-weight: 600;
  }

  .goods-desc {
    font-size: 28rpx;
    color: #8f8f8f;
    line-height: 40rpx;
  }

  .goods-logo {
    height: 750rpx;
    width: 100%;
  }

  .sales-title {
    font-size: 26rpx;
  }

  .goods-sales {
    font-size: 26rpx;
  }

  .goods-spec {
    padding: 30rpx 35rpx;
    height: 100%;
  }

  .goods-thum {
    width: 150rpx;
    height: 150rpx;
    border-radius: 10rpx;
  }

  .goods-price {
    color: $themeColor;
    font-size: 37rpx;
    font-weight: 600;
    &::before {
      content: '￥';
      font-size: 24rpx;
      font-weight: 600;
    }
  }

  .goods-stock {
    font-size: 24rpx;
  }

  .num-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    // position: relative;
    // right: -10rpx;

    .num-title {
      font-size: 28rpx;
      font-weight: 600;
    }
    .set-num {
      display: flex;
      height: 60rpx;
      position: relative;
      right: -10rpx;
      align-items: center;

      .num-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 35rpx;
        border-radius: 50%;
        width: 60rpx;
        height: 100%;
        text-align: center;
        background: #efefef;
        position: relative;
        z-index: 1;
        border: 1px solid #dedede;
      }

      .minus-btn {
        left: 20rpx;
      }
      .plus-btn {
        left: -20rpx;
      }
      .goods-num {
        width: 120rpx;
        height: 100%;
        font-size: 30rpx;
        background: #f5f5f5;
        padding: 10rpx 33rpx;
        text-align: center;
        box-sizing: border-box;
      }
    }
  }

  .finish-box {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 30rpx auto;
    width: 100%;
    text-align: center;

    .finish-btn {
      width: 90%;
      font-size: 28rpx;
      font-weight: 600;
      color: white;
      margin: 0 auto;
      padding: 30rpx 0;
      border-radius: 50rpx;
    }

    .buy-btn {
      letter-spacing: 10rpx;
      background-image: linear-gradient(to right, #f3204f, #f33720);
      box-shadow: rgba(255, 28, 0, 0.2) 0 5rpx 12rpx;
    }

    .cart-btn {
      letter-spacing: 5rpx;
      background-image: linear-gradient(to right, #fea412, #ed8f2a);
      box-shadow: rgba(255, 119, 1, 0.2) 0 5rpx 12rpx;
    }
  }

  .goods-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15rpx 20rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    background: white;
    border-top: 1px solid #efefef;

    .nav-left {
      width: 230rpx;
      display: flex;
      justify-content: space-evenly;

      .icon-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        .cart-num {
          position: absolute;
          top: -5rpx;
          left: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20rpx;
          color: white;
          border-radius: 50rpx;
          background: #f33426;
          padding: 5rpx;
          // width:60rpx;
          height: 32rpx;
          padding: 10rpx 10rpx;
          z-index: 10;

          // width:100%;
          // height:100%;
        }

        .icon-image {
          width: 50rpx;
          height: 50rpx;
        }
        .icon-title {
          font-size: 18rpx;
        }
      }
    }

    .nav-btn {
      width: 230rpx;
      text-align: center;
      font-size: 27rpx;
      font-weight: 600;
      color: white;
      letter-spacing: 3rpx;
      padding: 27rpx 0;
    }

    .add-cart {
      background: #f5ad28;
      border-top-left-radius: 50rpx;
      border-bottom-left-radius: 50rpx;
      background-image: linear-gradient(to right, #fea412, #ed8f2a);
      box-shadow: rgba(255, 119, 1, 0.2) 0 5rpx 12rpx;
    }
    .go-buy {
      border-top-right-radius: 50rpx;
      border-bottom-right-radius: 50rpx;
      background-image: linear-gradient(to right, #f3204f, #f33720);
      box-shadow: rgba(255, 28, 0, 0.2) 0 5rpx 12rpx;
    }
  }
</style>
